<template>
    <div class="recommend-list">
        <ul>
            <li v-for="v in recommendlist" :key="v.id">
                <div class="list-left">
                    <div class="list-left-img">
                        <img :src="`/src/assets/images/${v.img1}`" alt="">
                    </div>
                    <div class="list-left-title">
                        <div class="list-left-title-top">
                            <h4>{{ v.name }}</h4>
                            <img :src="`/src/assets/images/${v.img2}`" alt="">
                            <img :src="`/src/assets/images/${v.img3}`" alt="">
                        </div>

                        <div class="list-left-title-middle">
                            <p>{{ v.address }}</p>
                        </div>

                        <div class="list-left-title-bottom">

                            <el-tag class="ml-2" type="danger" effect="plain" v-for="(tagname, i) in v.tag" :key="i">{{
                                tagname }}</el-tag>

                        </div>
                    </div>
                </div>
                <!-- 一个上一个下，两端对齐 -->
                <div class="list-right">
                    <!-- 内部元素一左一右 -->
                    <div class="list-right-commend">
                        <div class="list-right-describe">
                            <p>好</p>
                            <a href="">33条点评</a>
                        </div>
                        <div class="list-right-score">
                            <p>4.5</p>
                        </div>
                    </div>
                    <div class="list-right-price">
                        <p>$333</p>
                        <el-button type="primary"> 查看详情</el-button>
                    </div>
                </div>
            </li>
        </ul>

    </div>

</template>
<script setup>
import { ref } from 'vue'


let recommendlist = ref([
    {
        id: 1,
        name: '上海外滩万达瑞华酒店',
        address: '天安门/王府井 | 距市中心直线310米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '1.png',
        img2: '星星3.png',
        img3: 'badge-thumb.png'
    },
    {
        id: 2,
        name: '上海兴华宾馆',
        address: '天安门/王府井 | 距市中心直线20米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '2.png',
        img2: '星星4.png',
        img3: 'badge-thumb.png'
    }
    ,
    {
        id: 3,
        name: '取舍名宿',
        address: '天安门/王府井 | 距市中心直线100米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '3.png',
        img2: '星星5.png',
        img3: 'badge-thumb.png'
    },
    {
        id: 4,
        name: '上海浦东温德姆酒店',
        address: '天安门/王府井 | 距市中心直线310米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '1.png',
        img2: '星星3.png',
        img3: 'badge-thumb.png'
    },
    {
        id: 5,
        name: '上海衡山花园酒店',
        address: '天安门/王府井 | 距市中心直线20米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '2.png',
        img2: '星星4.png',
        img3: 'badge-thumb.png'
    },
    {
        id: 6,
        name: '维也纳国际酒店(上海浦东机场店)',
        address: '天安门/王府井 | 距市中心直线100米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '6.png',
        img2: '星星5.png',
        img3: 'badge-thumb.png'
    },
    {
        id: 7,
        name: '上海南站石龙路亚朵酒店',
        address: '天安门/王府井 | 距市中心直线310米',
        transport: '',
        tag: ['网球场', 'SPA', '免费停车', '健身室', '商务中心', '会议室'],
        img1: '7.png',
        img2: '星星3.png',
        img3: 'badge-thumb.png'
    }
])
</script>
